const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
module.exports = ({ production, development }) => {
    function getStyleLoaders(){
        let loaders = [
            development?'style-loader':MiniCssExtractPlugin.loader,
            'css-loader',//可以处理css中的@import和url
            'postcss-loader'// CSS的预处理器
        ];
        return loaders;
    }
    return {
        //设置当前的模式为
        //mode: production ? 'production' : 'development',
        mode:'development',
        //如果生产环境不要生成sourcemap避免源码泄露，如果是开发环境，要生成sourcemap方便调试
        devtool: production ? false : 'source-map',
        entry: {
            //因为我们只有一个入口，默认情况下会把所有的代码都打包到main里
            main:'./src/index.js'
        },
        output:{
            clean:true
        },
        cache: {//可以把构建的中间结果放置在文件系统中，再次打包的时候可以复用那些没有变化的中间结果 
            type: 'filesystem'
        },
        optimization:{
            //告诉webpack是否要压缩输出的文件
            minimize:true,
            minimizer:[
                //使用TerserPlugin并行压缩JS和TS
                new TerserPlugin({parallel:true}),
                //使用CssMinimizerPlugin压缩CSS
                new CssMinimizerPlugin(),
            ],
            splitChunks:{
                chunks:'all'
            }
        },
        //在webpack里 resolve对象用于配置模块的解析方式
        resolve: {
            //指定webpack应该查找模块的目录，默认值是['node_modules']
            //先找当前目录中的node_modules,如果找不到会找上层目录中的node_modules
            //如果按下面的配置的话，只会查找当前目录下的node_modules
            modules: [path.resolve('node_modules')],
            //指定在导入语句时没有指定扩展名的时候，webpack会查找哪些扩展名
            extensions: ['.js'],
            //指定路径别名
            alias: {
                bootstrap: path.resolve('node_modules/bootstrap/dist/css/bootstrap.css')
            },
            //fallback允许你为Node.js的全局变量或模块设替代，这是webpack5的新选项
            fallback: {
                buffer: false,
                stream: false,
                crypto: false
            }
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    include: path.resolve('src'),
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                cacheDirectory:true,//开启缓存目录
                                presets: [
                                    [
                                        "@babel/preset-react",
                                        {//https://babel.dev/docs/babel-preset-react#both-runtimes
                                            runtime:'automatic'
                                        }
                                    ]
                                ]
                            }
                        }
                    ]
                },
                {
                    test:/\.css$/,
                    use:getStyleLoaders()
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            }),
            new MiniCssExtractPlugin()
        ],
        devServer:{
            historyApiFallback: true
        }
    }
}